import React from 'react'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Form, Input, Button, Upload, Icon, message, Modal } from 'antd'
import UploadImg from './component/UploadImg'
import UploadShowImg from '../../../components/Upload/index'
import moment from 'moment'
import styles from './index.less'

const FormItem = Form.Item;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {span: 5 },
  wrapperCol: {span: 19  }
};

class AdBuyer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      fileList:[],
      photoUrl:"",
      fileUrls:[],
      urls:[],
      mainImg:[],
      imgList:[]
    }
  }

  componentWillMount (){
    const { findOneItem } = this.props
    const aa = [];
    aa.push(findOneItem.photoUrl);
    const bb = aa && aa.map((item,index)=>{
      return {
        uid: index,
        url: item
      }
    })
    this.setState({
      mainImg: bb
    })

    const fileUrlsb = findOneItem && findOneItem.imageUrl && findOneItem.imageUrl.filter((val)=>{
      return !(!val || val === "");
    });

    const fileUrlsq = fileUrlsb && fileUrlsb.map((item,index)=>{
      return {uid:index,url:item}
    });
    this.setState({
      imgList: fileUrlsq
    })
  }

  handleMainImgChange = ({ fileList }) =>{
    console.log('aa',fileList)
    this.setState({ fileList });
    if(fileList && fileList.length > 0 &&  fileList[0].status == "done"){
       message.success("图片上传成功")
       let photoUrl = fileList[0].response.result
       this.setState({photoUrl})
    }
    console.log(fileList,'22222222222222222')
  }

  handleChange = ({ fileList }) =>{
    const { findOneItem } = this.props
    this.setState({fileUrls: fileList })
    console.log('fileUrls',this.state.fileUrls)
    console.log(this.state.fileUrls,'33333333333333333333333333333333')
    this.setState({imgList: [] })
  }

  onRemoveSingelImg = ( file) => {
    const {urls} = this.state
    this.setState({urls:file})
    this.setState({
      mainImg: []
    })
  }

  onHandleOk = () =>{
    const { validateFields, getFieldsValue } = this.props.form
    const { findOneItem } = this.props
    const { photoUrl, fileUrls,fileList } = this.state

    const newUrls = fileUrls.length > 0 && fileUrls.map(item =>{
      return item.url
    })
    const newUrls2 = fileUrls.length > 0 && fileUrls.filter((val)=>{
        return !(val.url)
    });
    const newUrls1 = newUrls2.length > 0 && newUrls2.map(item =>{
        return item.response.result
    })

    const newUrlsval = newUrls && newUrls.concat(newUrls1)

    console.log('findOneItem',findOneItem)

    const fileListval = fileList.length > 0 && fileList.map(item =>{
      return item.response.result
    })

    console.log(fileListval[0],'22222222222222222222222222111111111111111')

    const newUrlsvalfinal = newUrlsval && newUrlsval.filter((val)=>{
      return !(!val || val === "");
    });


    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
       id:findOneItem && findOneItem.id,
       photoUrl:photoUrl ? photoUrl : findOneItem.photoUrl,
       imageUrl: newUrlsvalfinal ? newUrlsvalfinal : findOneItem.imageUrl,
       createTime:moment().format("YYYY-MM-DD hh:mm:ss"),
       consumerId: findOneItem.hasOwnProperty('consumerId') ? findOneItem.consumerId : findOneItem.id
      };
     if(findOneItem && !(findOneItem.hasOwnProperty('consumerId'))){
      delete data.id
     }
      this.props.onEditBuyer(data)
    });
  }



  render() {
    const { getFieldDecorator } = this.props.form
    const { modalVisibel, findOneItem,lookstate } = this.props
    const { fileList, fileUrls, urls,photoUrl } = this.state
    const urlsq = [{uid:1,url:findOneItem.photoUrl}]

    const fileUrlsb = findOneItem && findOneItem.imageUrl && findOneItem.imageUrl.filter((val)=>{
      return !(!val || val === "");
    });

    const fileUrlsq = fileUrlsb && fileUrlsb.map((item,index)=>{
      return {uid:index,url:item}
    });

    const titlestate = findOneItem.hasOwnProperty('consumerId') ? "修改商家信息" :"添加商家信息";
    const footer = <div>
      <Button onClick={this.props.onHideModal}>取消</Button>
      <Button type="primary" onClick={this.onHandleOk}>
        确定
      </Button>
    </div>

    console.log(fileUrls,fileUrlsq,'2222222222226666666666667777777777777')

    return (
      <Modal className={styles.AdBuyer}
      title={lookstate == 0 ? '查看商家信息' : titlestate}
      width={600}
      style={{ top: 10 }}
      onCancel={this.props.onHideModal}
      footer={lookstate == 0 ? null : footer}
      visible={modalVisibel}>
        <Form style={{width:400,position:"relative"}}>
          <FormItem  label="会员名称" {...formItemLayout} style={{marginBottom:'10px'}}>
             <span>{findOneItem && findOneItem.name}</span>
          </FormItem>
          <FormItem  label="商家名称" {...formItemLayout} style={{marginBottom:'10px'}}>
            {getFieldDecorator('name',{
               initialValue: findOneItem.hasOwnProperty('consumerId') ? findOneItem && findOneItem.name : "",
               rules: [{ required: true,message:"请填写" }],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem label="地址" {...formItemLayout} style={{marginBottom:'10px'}}>
            {getFieldDecorator('address',{
               initialValue:findOneItem && findOneItem.address,
               rules: [{ required: true,message:"请填写" }],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem label="联系方式" {...formItemLayout} style={{marginBottom:'10px'}}>
            {getFieldDecorator('phone',{
              initialValue:findOneItem && findOneItem.phone,
               rules: [{ required: true,message:"请填写" }],
            })(
              <Input/>
            )}
          </FormItem>
          <p>展示在客户端</p>

          {
            lookstate == 0 ? <div>
              <h3>主要展示图片: <span>(请上传236*170px大小图片)</span></h3>
              <div style={{height:'110px',width: '240px'}}>
                 <img src={findOneItem && findOneItem.photoUrl} style={{height:'100%',width: '100%'}}/>
              </div>

              <h3>展示图片:<span>(请上传236*170px大小图片)</span></h3>

              <div style={{overflow:'hidden'}}>
                 {findOneItem && findOneItem.imageUrl && findOneItem.imageUrl.map(item=>{
                    return (
                      <img src={item} style={{height:'110px',width: '110px',float:'left', margin: '0px 10px 0px 0px'}}/>
                    )
                 })}


              </div>
            </div> : <div>
              <h3>主要展示图片: <span>(请上传236*170px大小图片)</span></h3>
              <div style={{height:'110px'}}>
              {
                findOneItem.hasOwnProperty('consumerId') ? <UploadImg
                onRemoveSingelImg={this.onRemoveSingelImg}
                fileList={fileList.length > 0 ? fileList : this.state.mainImg}
                handleMainImgChange={this.handleMainImgChange}/> :
                <UploadImg
                onRemoveSingelImg={this.onRemoveSingelImg}
                fileList={fileList.length > 0 ? fileList : fileList}
                handleMainImgChange={this.handleMainImgChange}/>
              }

                </div>

                <h3>展示图片:<span>(请上传236*170px大小图片)</span></h3>

              <UploadShowImg
                  // onRemove={this.onRemove}
                  handleChange={this.handleChange}
                  newImgs={fileUrls.length > 0 ? fileUrls : fileUrlsq}
              />
            </div>
          }
          <h3>商家描述:</h3>
          <FormItem  {...formItemLayout} style={{marginBottom:'10px'}}>
            {getFieldDecorator('detail',{
              initialValue:findOneItem && findOneItem.detail,
               rules: [{ required: true,message:"请填写" }],
            })(
              <TextArea rows={5}  placeholder="最多400个汉字"/>
            )}
          </FormItem>

        </Form>
      </Modal>
    );
  }
};

export default Form.create()(AdBuyer)
